<template>
  <div class="clientManger-container">
    <div class="manger-title" style="">客户端管理</div>
    <el-button type="success" @click="add()"> 添加</el-button>
    <el-table :data="ClientArr" style="width: 100%">
      <el-table-column align="center" type="index" label="序号" width="100">
      </el-table-column>
      <el-table-column prop="name" label="名称" width="180"> </el-table-column>
      <el-table-column prop="url" label="访问地址" width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="view(scope.row)"> 查看</el-button>
          <el-button type="primary" plain @click="edit(scope.row)">
            修改</el-button
          >

          <el-popconfirm
            @confirm="deleteItem(scope.row)"
            title="确定删除吗？"
            placement="top"
            ><el-button
              slot="reference"
              style="margin-left: 10px"
              type="danger"
            >
              删除</el-button
            ></el-popconfirm
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        background
        layout="prev, pager, next"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  Table,
  TableColumn,
  Button,
  Popconfirm,
  Pagination,
  Message,
} from "element-ui";
import { QueryClient, DeleteClient } from "../api/Client";
//引入的方法 使用大驼峰
//内部的方法  使用小驼峰
export default {
  components: {
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    [Button.name]: Button,
    [Popconfirm.name]: Popconfirm,
    [Pagination.name]: Pagination,
  },
  data() {
    return {
      ClientArr: [],
      currentPage: 1,
      total: 5,
      pageSize: 5,
    };
  },
  created() {
    this.queryClient();
  },
  methods: {
    queryClient(pageIndex, pageSize) {
      QueryClient("", pageIndex, pageSize).then((result) => {
        this.ClientArr = result.data;
        this.total = result.total;
      });
    },
    edit(row) {
      this.$router.push({
        path: `/Home/ClientItem/${row.id}/edit`,
      });
    },
    deleteItem(row) {
      var _this = this;
      DeleteClient(row).then((result) => {
        if (result.code == 200) {
          Message.success("删除成功");
          _this.queryClient();
        }
      });
    },

    view(row) {
      this.$router.push({
        path: `/Home/ClientItem/${row.id}/view`,
      });
    },
    add() {
      this.$router.push({
        path: `/Home/ClientItem/${"-"}/add`,
      });
    },
    handleCurrentChange(val) {
      console.log(val);
      this.currentPage = val;
      this.queryClient("", val, this.pageSize);
    },
  },
};
</script>

<style>
.title {
  margin-top: 10px;
  margin-bottom: 10px;
}
.block {
  margin-top: 30px;
}
.manger-title {
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: bold;
}
.clientManger-container {
  padding: 20px;
}
</style>
